<template>
  <div class="pagination-sync-test">
    <h1>分页同步测试</h1>
    
    <div class="test-sections">
      <!-- 当前分页设置显示 -->
      <div class="test-section">
        <h2>当前分页设置</h2>
        <div class="current-settings">
          <p><strong>Store中的pageSize:</strong> {{ store.pageSize }}</p>
          <p><strong>设置组件中的valuePage:</strong> {{ valuePage }}</p>
        </div>
      </div>
      
      <!-- 设置组件测试 -->
      <div class="test-section">
        <h2>设置组件（Setup.vue）</h2>
        <div class="setup-component">
          <label>每页显示条数:</label>
          <el-select v-model="valuePage" placeholder="Select" style="width: 120px; margin-left: 10px;">
            <el-option v-for="item in optionsPage" :key="item.value" :label="item.value" :value="item.value" />
          </el-select>
        </div>
      </div>
      
      <!-- 学生列表分页测试 -->
      <div class="test-section">
        <h2>学生列表分页</h2>
        <div class="pagination-test">
          <p>当前页面大小: {{ studentPageSize }}</p>
          <el-config-provider :locale="zhCn">
            <el-pagination
              v-model:current-page="currentPageStudents"
              v-model:page-size="studentPageSize"
              :page-sizes="[10, 20, 50, 100]"
              :total="200"
              layout="total, sizes, prev, pager, next, jumper"
              @size-change="handleStudentSizeChange"
              @current-change="handleStudentCurrentChange"
            />
          </el-config-provider>
        </div>
      </div>
      
      <!-- 任务列表分页测试 -->
      <div class="test-section">
        <h2>任务列表分页</h2>
        <div class="pagination-test">
          <p>当前页面大小: {{ taskPageSize }}</p>
          <el-config-provider :locale="zhCn">
            <el-pagination
              v-model:current-page="currentPageTasks"
              v-model:page-size="taskPageSize"
              :page-sizes="[10, 20, 50, 100]"
              :total="150"
              layout="total, sizes, prev, pager, next, jumper"
              @size-change="handleTaskSizeChange"
              @current-change="handleTaskCurrentChange"
            />
          </el-config-provider>
        </div>
      </div>
      
      <!-- 测试说明 -->
      <div class="test-section">
        <h2>测试说明</h2>
        <div class="test-instructions">
          <ul>
            <li>修改"设置组件"中的每页显示条数，其他分页组件应该同步更新</li>
            <li>修改任何一个分页组件的页面大小，其他组件也应该同步更新</li>
            <li>所有分页组件都应该显示中文界面</li>
            <li>Store中的pageSize值应该实时反映当前设置</li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, computed } from 'vue'
import { useStore } from '@/stores'
import zhCn from 'element-plus/es/locale/lang/zh-cn'

const store = useStore()

// 设置组件的分页选项
const optionsPage = [
  { value: 10 },
  { value: 20 },
  { value: 50 },
  { value: 100 },
]

// 设置组件的分页值（双向绑定到store）
const valuePage = computed({
  get: () => store.pageSize,
  set: (value) => store.setPageSize(value)
})

// 学生列表分页
const currentPageStudents = ref(1)
const studentPageSize = computed(() => store.pageSize)

// 任务列表分页
const currentPageTasks = ref(1)
const taskPageSize = computed(() => store.pageSize)

// 学生列表分页处理函数
const handleStudentSizeChange = (size: number) => {
  store.setPageSize(size)
  currentPageStudents.value = 1
}

const handleStudentCurrentChange = (page: number) => {
  currentPageStudents.value = page
}

// 任务列表分页处理函数
const handleTaskSizeChange = (size: number) => {
  store.setPageSize(size)
  currentPageTasks.value = 1
}

const handleTaskCurrentChange = (page: number) => {
  currentPageTasks.value = page
}
</script>

<style scoped>
.pagination-sync-test {
  padding: 20px;
  max-width: 1200px;
  margin: 0 auto;
}

.test-sections {
  display: flex;
  flex-direction: column;
  gap: 30px;
}

.test-section {
  padding: 20px;
  border: 1px solid #ddd;
  border-radius: 8px;
  background: #f9f9f9;
}

.test-section h2 {
  margin-bottom: 20px;
  color: #333;
  border-bottom: 2px solid #409EFF;
  padding-bottom: 10px;
}

.current-settings {
  background: white;
  padding: 15px;
  border-radius: 6px;
  border: 1px solid #eee;
}

.current-settings p {
  margin: 10px 0;
  font-size: 16px;
}

.setup-component {
  background: white;
  padding: 15px;
  border-radius: 6px;
  border: 1px solid #eee;
  display: flex;
  align-items: center;
}

.pagination-test {
  background: white;
  padding: 20px;
  border-radius: 6px;
  border: 1px solid #eee;
}

.pagination-test p {
  margin-bottom: 15px;
  font-size: 16px;
  font-weight: 500;
}

.test-instructions {
  background: white;
  padding: 20px;
  border-radius: 6px;
  border: 1px solid #eee;
}

.test-instructions ul {
  margin: 0;
  padding-left: 20px;
}

.test-instructions li {
  margin: 10px 0;
  line-height: 1.6;
}
</style>
